<template>
    <div class="systemConfig">
        <el-tabs type="border-card">
            <!-- 关于我 -->
            <el-tab-pane>
                <span slot="label"><i class="el-icon-date"></i>关于我</span>
                <!-- 系统配置的表单 -->
                <el-form
                    style="margin-left: 20px"
                    label-width="100px"
                    label-position="left"
                    :model="sizeForm"
                >
                    <!-- LOGO -->
                    <el-form-item label="用户头像">
                        <el-upload
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                        >
                            <img
                                v-if="imageUrl"
                                :src="imageUrl"
                                class="avatar"
                            />
                            <i
                                v-else
                                class="el-icon-plus avatar-uploader-icon"
                            ></i>
                        </el-upload>
                    </el-form-item>
                    <!-- 昵称 -->
                    <el-form-item label="昵称">
                        <el-input v-model="meInfoList.nickName"></el-input>
                    </el-form-item>
                    <!-- 性别 -->
                    <el-form-item label="性别">
                        <el-radio v-model="meInfoList.gender" label="1" border>开启</el-radio>
                        <el-radio  v-model="meInfoList.gender" border label="2">关闭</el-radio>
                    </el-form-item>
                    <!-- 邮箱 -->
                    <el-form-item label="邮箱">
                        <el-input v-model="meInfoList.email" ></el-input>
                    </el-form-item>
                    <!-- QQ号 -->
                    <el-form-item label="QQ号">
                        <el-input v-model="meInfoList.qqNumber" ></el-input>
                    </el-form-item>
                    <!-- Github -->
                    <el-form-item label="Github">
                        <el-input v-model="meInfoList.github" ></el-input>
                    </el-form-item>
                    <!-- Gitee -->
                    <el-form-item label="Gitee">
                        <el-input v-model="meInfoList.gitee" ></el-input>
                    </el-form-item>
                    <!-- 职业 -->
                    <el-form-item label="职业">
                        <el-input v-model="meInfoList.occupation" ></el-input>
                    </el-form-item>
                    <!-- 简介 -->
                    <el-form-item label="简介">
                        <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="meInfoList.summary"
                        >
                        </el-input>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <!-- 个人履历 -->
            <el-tab-pane>
                <!-- 富文本编辑器组件 -->
                <span slot="label"><i class="el-icon-date"></i>个人履历</span>
                <div>
                    <quill-editor
                        ref="myTextEditor"
                        v-model="meInfoList.personResume"
                        :options="editorOption"
                    ></quill-editor>
                </div>
            </el-tab-pane>

            <!-- 修改密码 -->
            <el-tab-pane>
                <span slot="label"><i class="el-icon-date"></i>修改密码</span>
                <el-form
                    style="margin-left: 20px"
                    label-width="80px"
                    label-position="left"
                    :model="sizeForm"
                    :rules="rules"
                >
                    <!-- 旧密码 -->
                    <el-form-item label="旧密码" prop="oldpassword">
                        <el-input></el-input>
                    </el-form-item>
                    <!-- 新密码 -->
                    <el-form-item label="新密码" prop="newpassword">
                        <el-input></el-input>
                    </el-form-item>
                    <!-- 重复输入 -->
                    <el-form-item label="重复输入" prop="repeat">
                        <el-input></el-input>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import { getList,getMe } from "@/api/system";
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
    name: "systemConfig",
    data() {
        return {
            sizeForm: {
                resource: "",
            },
            imageUrl: "",
            editorOption: {},
            content: "",
            // 修改密码的正则验证规则
            rules: {
                oldpassword: [
                    {
                        required: true,
                        message: "请输入旧密码",
                        trigger: "blur",
                    },
                ],
                newpassword: [
                    {
                        required: true,
                        message: "请输入新密码",
                        trigger: "blur",
                    },
                ],
                repeat: [
                    {
                        required: true,
                        message: "请输入再次输入新密码",
                        trigger: "blur",
                    },
                ],
            },
            // 用户列表数据
            meInfoList: {}
        };
    },
    components: {
        quillEditor
    },
    created() {
        this.getDictTypeList();
        this.getMeInfo()
    },
    methods: {
        // 获取字典数据
        async getDictTypeList() {
            var params = {};
            params.dictType = "sys_user_sex";
            try {
                const res = await getList(params)
            } catch (error) {
                console.log(error);
            }
        },
        // 获取用户数据
        async getMeInfo() {
            try {
                const {data: res} = await getMe()
                console.log(res.data);
                this.meInfoList = res.data
                this.imageUrl = this.meInfoList.photoList[0]

            } catch (error) {
                console.log(error);
            }
        }
    },
};
</script>

<style lang="less" scoped>
.systemConfig {
    /deep/ .el-form {
        .el-form-item__label {
            font-weight: 700;
        }
        .el-alert {
            margin-bottom: 20px !important;
            .el-alert__content {
                .el-alert__title {
                    color: #333;
                    font-size: 16px;
                    line-height: 32px;
                }
            }
        }
        .el-input__inner {
            width: 400px;
        }
        .el-textarea__inner {
            width: 400px;
        }
        // logo
        .avatar-uploader .el-upload:hover {
            border-color: #409eff;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 110px;
            height: 110px;
            line-height: 110px;
            text-align: center;
        }
        .avatar {
            width: 110px;
            height: 110px;
            display: block;
        }
    }
    /deep/ .ql-container {
        height: 600px !important;
    }
}
</style>